<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent]);

const option = ref({
  title: { text: '教师画像（课程完成率）' },
  tooltip: {},
  legend: { data: ['完成率'] },
  toolbox: { feature: { saveAsImage: {} } },
  xAxis: { type: 'category', data: ['教师A','教师B','教师C','教师D'] },
  yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
  series: [{ name: '完成率', type: 'bar', data: [95, 88, 76, 82] }]
});
</script>

<style scoped>.chart { width: 100%; height: 100%; }</style>